import React from 'react';
import {
  Image,
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Platform,
} from 'react-native';
import styles from './style';

const Tabs = (props) => {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const {dataSource = [{name: '已选课程', id: 0}]} = props;
  return (
    <View style={styles.tabs_container}>
      {(dataSource || []).map((item) => (
        <TouchableOpacity
          key={item.id}
          style={styles.btn}
          onPress={() => {
            setCurrentIndex(item.id);
            props.onChange && props.onChange(item);
          }}>
          <Text
            style={[
              styles.btn_text,
              item.id === currentIndex && styles.btn_text_selected,
            ]}>
            {item.name}
          </Text>
          {item.id === currentIndex && <View style={styles.selected} />}
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default Tabs;
